import { useEffect, useState } from 'react';
import { Checkbox, Toast } from 'antd-mobile';
import api from '../../atoms/api';
import smartfetch from '../../atoms/smartfetch';
import { IData as D1, Query as Q1, Result as R1 } from '../api/activity/fielddata.api';
import { IData as D2, Message as M2, Result as R2 } from '../api/activity/saveinfo.api';
import MainContainer from '../../components/maincontainer';
import HeadTitle from '../../components/headtitle';
import Container from '../../components/container';
import Infocontainer from './infocontainer';
import LeftLbl from './leftlbl';
import uuid from '../../atoms/uuid';
import GetUserInfo from '../../atoms/userinfo';
import DateConvert from '../../atoms/date';
import Btn from '../../components/btn';
import GroupTitleByupdown from '../../components/grouptitlebyupdown';

export default function Content({ aid }: { aid: string }) {

	//日期展示
	function GetDate(d: number) {
		return new Date(d);
	}
	const [startVisible, setStartVisible] = useState(false);
	const [endVisible, setEndVisible] = useState(false);
	const [byVisible, setByVisible] = useState(false);
	//报名要求
	const [direction, setDirection] = useState(true);
	const [name, setName] = useState(true);
	const [id, setId] = useState(false);
	const [phone, setPhone] = useState(true);
	const [work, setWork] = useState(false);
	const [snum, setSNum] = useState(false);
	const [isTo, setIsTo] = useState(false);
	const [isCancel, setIsCancel] = useState(false);



	//待保存数据
	const [data, setData] = useState<M2>([]);
	//执行
	useEffect(() => {
		//获取数据
		void (async () => {
			const d = await smartfetch<R1, Q1>(api['/api/activity/fielddata'], 'get', { aid });
			if (d) {
				const user = GetUserInfo();
				const m = d.data.map((it) => {
					return {
						id: uuid(),
						aid,
						userid: user.userid,
						did: it.did,
						value: '',
						name: it.name,
						type: it.type,
						isrequired: it.isrequired,
						alternative: it.alternative
					} as D2;
				});
				setData(m);
			}
		})();
	}, [aid]);
	return <>
		<MainContainer>
			<HeadTitle title='活动报名' />
			<Container>
				{/* 报名信息录入 */}
				<div className='infov'>
					{data.map((it) => {
						return <Infocontainer key={it.id}>
							<LeftLbl title={it.name} required={Boolean(it.isrequired)} />
							<GetInput d={it} onChange={(v) => {
								const d = data.map((x) => {
									if (x.did === it.did) {
										x.value = v;
									}
									return x;
								});
								setData(d);
							}} />
						</Infocontainer>;
					})}
				</div>
				<GroupTitleByupdown title='报名要求' onclick={() => {
						setDirection(!direction);
					}} />
					<div className={direction ? 'cboxup' : 'cboxdown'}>
						<div style={{ display: 'flex' }}>
							<img src="images/InfoCircle.png" alt="" style={{
								width: '1rem',
								height: '1rem',
								marginTop: '0.3rem',
							}} />
							<span>姓名必填</span>
						</div>
						<div style={{ display: 'flex' }}>
							<img src="images/InfoCircle.png" alt="" style={{
								width: '1rem',
								height: '1rem',
								marginTop: '0.3rem',
							}} />
							<span>时间必填</span>
						</div>
						<div style={{ display: 'flex' }}>
							<img src="images/InfoCircle.png" alt="" style={{
								width: '1rem',
								height: '1rem',
								marginTop: '0.3rem',
							}} />
							<span>联系方式必填</span>
						</div>
						<div style={{ display: 'flex' }}>
							<img src="images/InfoCircle.png" alt="" style={{
								width: '1rem',
								height: '1rem',
								marginTop: '0.3rem',
							}} />
							<span>商品类型不得为危险品</span>
						</div>
						<div style={{ display: 'flex' }}>
							<img src="images/InfoCircle.png" alt="" style={{
								width: '1rem',
								height: '1rem',
								marginTop: '0.3rem',
							}} />
							<span>租用面积不得小于20平米</span>
						</div>
					</div>
				{/* 按钮 */}
				<div className='btnv'>
					<Btn label='确定报名' onClick={async () => {
						//验证必填项
						const f = data.find((it) => {
							if (it.isrequired && !it.value) {
								return true;
							}
							return false;
						});
						if (f) {
							Toast.show({
								content: `${f.name}不能为空`,
								position: 'center',
								icon: 'fail'
							});
							return;
						}
						//调用保存服务
						const result = await smartfetch<R2, M2>(api['/api/activity/saveinfo'], 'post', data);
						if (result.ok) {
							Toast.show({
								content: '报名成功！',
								position: 'center',
								icon: 'success'
							});
						}
						else {
							Toast.show({
								content: '报名失败！',
								position: 'center',
								icon: 'fail'
							});
						}
					}} />
					<Btn label='取消' isRed onClick={() => {
						window.history.back();
					}} />
				</div>
			</Container>
			<style jsx>{`
		.infov{
display:flex;
flex-direction: column;
width: 100%;
flex-grow: 1;
padding-top: 1rem;
}
			.btnv{
display:flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
flex-grow: 0;
padding: 1rem;
}

			`}</style>
		</MainContainer>
	</>;
}

/**
 * 输入信息
 * @param d 
 * @param m 
 * @returns 
 */
function GetInput(
	{
		d,
		onChange
	}: {
		d: D2
		onChange(v: string): void
	}) {
	//文字1 数字2 日期3 选择列表4 文件/图片上传5
	switch (d.type) {
		case 1:
		default:
			return <>
				<input className='inp' value={GetValue(d)} type='text' placeholder={`请输入${d.name}`} onChange={(e) => {
					onChange(e.target.value);
				}} />
				<style jsx>{`
.inp{
margin: 0 1rem 0.2rem 0;
flex-grow: 1;
font-size: 0.875rem;
color: #000000;
border-color: #D9D9D9;
border-width: 0.0625rem;
border-style: solid;
}
`}</style>
			</>;
		// case 2:
		// 	return <>

		// 	</>;
		// case 3:
		// 	return <>

		// 	</>;
		// case 4:
		// 	return <>

		// 	</>;
		// case 5:
		// 	return <>

		// 	</>;
	}

}

/**
 * 获取字段值
 * @param d 
 */
function GetValue(d: D2) {
	const v = d.value;
	//文字1 数字2 日期3 选择列表4 文件/图片上传5
	switch (d.type) {
		case 1:
		default:
			return v;
		// case 2:
		// 	return Number(v);
		// case 3:
		// 	return DateConvert(v);
		// case 4:
		// 	return '';
		// case 5:
		// 	return '';
	}
}
